<template>
    <div class="system-user">
        <div class="_box">
            <dept-tree @click="handleClickDepartment" :department="department" class="dept" :class="{'_collapse': collapse}"></dept-tree>
            <user-table ref="userTable" :department="department" class="user"></user-table>
            <div @click="collapse=!collapse" class="icon-arrow" :class="{'_expand': !collapse, '_collapse': collapse}">
                <i :class="collapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
            </div>
        </div>
    </div>
</template>

<script>
    import deptTree from '../dept/tree'
    import userTable from './table'

    export default {
        name: 'index',
        components: {
            deptTree, userTable
        },
        created() {

        },
        data() {
            return {
                collapse: false,
                department: {
                    departmentId: "1",
                    departmentName: null,
                    departmentIds: "1"
                }
            }
        },
        methods: {
            handleClickDepartment() {
                this.$refs.userTable.getUserPage()
            }
        }
    };
</script>

<style lang="scss" scoped>
    .system-user {
        ._box {
            display: flex;
            height: 100%;
            position: relative;
        }
        .dept {
            height: 100%;
            width: 300px;
            background-color: #fff;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-transition: width .3s;
            transition: width .3s;
            margin-right: 10px;
        }
        .dept._collapse {
            margin-right: 0;
            width: 0;
        }

        .user {
            width: calc(100% - 310px);
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .icon-arrow._expand {
            border-right: 15px solid #f7f7f7;
            left: 285px;
        }

        .icon-arrow._collapse {
            left: 0;
            border-left: 15px solid #f7f7f7;

            i {
                left: -15px;
            }
        }


        .icon-arrow {
            position: absolute;
            top: calc(50% - 20px);
            display: inline-block;
            z-index: 9;
            cursor: pointer;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;

            &:hover {
                opacity: .8;
            }

            i {
                position: absolute;
                top: -8px;
                left: 0;
                color: #666;
            }
        }
    }
</style>
